<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  li{
    height: 50px;
    line-height: 50px;
    background-color: rebeccapurple;
    margin-top: 5px;
    width: 600px;
    color: #fff;
    font-size: 30px;
  }
</style>
</head>
<body>

  <div id='app'>
    <ul>
      <li 
        v-for="(el, index) in arr" 
        @click="change(index)"
        :key="index">
        {{ el }}
      </li>
    </ul>
    <hr>
    <ul>
      <li 
        v-for="(el, index) in arr2" 
        @click="change2(index)"
        :key="index">
        {{ el.a }}
      </li>
    </ul>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const app = new Vue({
    el: '#app'
    ,data:{
      arr: [1,2,3,4]
      ,arr2: [
        {
          a: 10
        }
        ,{
          a: 20
        }
        ,{
          a:30
        }
      ]
    }
    ,methods: {
      change(index){
        // this.arr[index] = 100;
        // this.arr.length = 0;
        this.$set(this.arr,index,100)
        console.log(index, this.arr);
      }
      ,change2(index){
        this.arr2[index].a = 100;
        console.log(index, this.arr);
      }
    }
  })
</script>
</body>
</html>